  <template>
  <div id="Contion">
    <div class="jxsc">
      <h3>
        精选手册
        <span>
          <a href>查看更多></a>
        </span>
      </h3>
      <div class="top">
        <img src="/imagess/a.png" alt />
        <div class="qdkf">
          <p class="sc">前端开发学习手册</p>
          <p class="sj">2019.12.23</p>
        </div>
        <button class="jr">进入</button>
      </div>
      <div class="bottom">
        <img src="/imagess/a.png" alt />
        <div class="java">
          <p class="sc">JAVA开发学习手册</p>
          <p class="sj">2019.12.23</p>
        </div>
        <button class="jr">进入</button>
      </div>
    </div>
    <div class="jxbk">
      <h3>
        精选博客
        <span>
          <a href>查看更多></a>
        </span>
      </h3>
      <img src="/imagess/a.png" alt />
      <div class="bcxx">
        <p class="sc">编程学习的五大误区</p>
        <p class="sj">2019.12.23</p>
      </div>
      <button class="jr">进入</button>
    </div>
    <div class="jxsp">
      <h3>
        精选视频
        <span>
          <a href>查看更多></a>
        </span>
      </h3>
      <img src="/imagess/a.png" alt />
      <div class="sp">
        <p class="sc">视频</p>
        <p class="sj">2019.12.23</p>
      </div>
      <button class="jr">进入</button>
    </div>
    <div class="Buttomer">
      <p class="xz">
        <a href>晓舟报告</a>
        <span>|</span>
        <a href>团队介绍</a>
      </p>
      <p class="xztext">晓舟报告官方网站&copy;2019冀ICP备18023262号-4</p>
      <a href="#top" class="fhtb" title="点我反返回顶部"></a>
    </div>
  </div>
</template>
<script src ="../../public/js/fontsizeset.js"></script>
<script >
export default {};
</script>

<style >
* {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}
#Contion {
  width: 100%;
  height: 10.85rem;
  float: left;
}
#Contion .jxsc {
  width: 88%;
  height: 3.8rem;

  border-bottom: 0.01rem solid #f2f2f2;
  margin: auto;
}

#Contion .jxsc h3 {
  font-size: 0.25rem;
  margin-top: 0.3rem;
  margin-left: 0.3rem;
}

#Contion .jxsc a {
  color: #b2b2b2;
  text-decoration: none;
  margin-left: 4rem;
}

#Contion .jxsc .top {
  width: 5.6rem;
  height: 1.3rem;
  margin-top: 0.3rem;
}

#Contion .jxsc .top img {
  width: 1.79rem;
  height: 1.2rem;
  margin-left: 0.2rem;
  margin-top: 0.1rem;
  float: left;
}

#Contion .jxsc .top .qdkf {
  float: left;
}

#Contion .jxsc .top .qdkf .sc {
  margin-left: 0.24rem;
  margin-top: 0.15rem;
  font-size: 0.1rem;
}

#Contion .jxsc .top .qdkf .sj {
  font-size: 0.24rem;
  color: #b2b2b2;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}

#Contion .jxsc .top .jr {
  width: 1rem;
  height: 0.42rem;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border: none;
  background-color: #00ccff;
  color: white;
  position: absolute;
  margin-left: 1.5rem;
  margin-top: 0.4rem;
}

#Contion .jxsc .bottom {
  margin-top: 0.3rem;
}

#Contion .jxsc .bottom img {
  width: 1.79rem;
  height: 1.2rem;
  margin-left: 0.2rem;
  margin-top: 0.1rem;
  float: left;
}

#Contion .jxsc .bottom .java {
  float: left;
}

#Contion .jxsc .bottom .java .sc {
  margin-left: 0.24rem;
  margin-top: 0.15rem;
  font-size: 0.2rem;
}

#Contion .jxsc .bottom .java .sj {
  font-size: 0.24rem;
  color: #b2b2b2;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}

#Contion .jxsc .bottom .jr {
  width: 1rem;
  height: 0.42rem;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border: none;
  background-color: #00ccff;
  color: white;
  position: absolute;
  margin-left: 1.4rem;
  margin-top: 0.4rem;
}

#Contion .jxbk {
  width: 88%;
  height: 2.2rem;
  border-bottom: 0.01rem solid #f2f2f2;
  margin: auto;
}

#Contion .jxbk h3 {
  font-size: 0.25rem;
  margin-top: 0.3rem;
  margin-left: 0.3rem;
}

#Contion .jxbk a {
  color: #b2b2b2;
  text-decoration: none;
  margin-left: 4rem;
}

#Contion .jxbk img {
  width: 1.79rem;
  height: 1.2rem;
  margin-left: 0.2rem;
  margin-top: 0.1rem;
  float: left;
}

#Contion .jxbk .bcxx {
  float: left;
}

#Contion .jxbk .bcxx .sc {
  margin-left: 0.24rem;
  margin-top: 0.15rem;
  font-size: 0.2rem;
}

#Contion .jxbk .bcxx .sj {
  font-size: 0.24rem;
  color: #b2b2b2;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}

#Contion .jxbk .jr {
  width: 1rem;
  height: 0.42rem;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border: none;
  background-color: #00ccff;
  color: white;
  position: absolute;
  margin-left: 1.25rem;
  margin-top: 0.4rem;
}

#Contion .jxsp {
  width: 88%;
  height: 2em;
  border-bottom: 0.01rem solid #f2f2f2;
  margin: auto;
}

#Contion .jxsp h3 {
  font-size: 0.25rem;
  margin-top: 0.3rem;
  margin-left: 0.3rem;
}

#Contion .jxsp a {
  color: #b2b2b2;
  text-decoration: none;
  margin-left: 4rem;
}

#Contion .jxsp img {
  width: 1.79rem;
  height: 1.2rem;
  margin-left: 0.2rem;
  margin-top: 0.1rem;
  float: left;
}

#Contion .jxsp .sp {
  float: left;
}

#Contion .jxsp .sp .sc {
  margin-left: 0.24rem;
  margin-top: 0.15rem;
  font-size: 0.2rem;
}

#Contion .jxsp .sp .sj {
  font-size: 0.24rem;
  color: #b2b2b2;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}

#Contion .jxsp .jr {
  width: 1rem;
  height: 0.42rem;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border: none;
  background-color: #00ccff;
  color: white;
  position: absolute;
  margin-left: 2.2rem;
  margin-top: 0.4rem;
}
#Contion .Buttomer {
  width: 100%;
  height: 1.47rem;
  border: 1px solid #ffffff;

  text-align: center;
}

#Contion .Buttomer p:first-child {
  color: #b3b3b3;
  margin-top: 0.65rem;
}

#Contion .Buttomer p:first-child,
.xztext {
  font-size: 0.22rem;
}
#Contion .Buttomer .xz a{
  color: #00ccff;
}
#Contion .Buttomer .fhtb {
  display: block;
  width: 0.58rem;
  height: 0.58rem;
  background-image: url("/imagess/返回头部.png");
  background-size: 0.58rem 0.58rem;
  position: absolute;
  left: 6.7rem;
  top: 15rem;
}
</style>
